
import React from 'react'
import ReactDOM from 'react-dom'
import * as UserCenterAction  from '../../actions/UserCenterAction';
import { connect }  from 'react-redux';

import CenterSettingTools from './CenterSettingTools'
import CenterSettingList from './CenterSettingList'
import CenterBindUnitEdit from './CenterSettingEdit'
import CenterChangePassEdit from './CenterChangePassEdit'

class CenterSettingBody extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      activeData: {}
    }
  }

  componentDidMount() {
    var self = this;
    this.$modal = $(ReactDOM.findDOMNode(this.refs.CenterSettingEdit))
    this.$changeModal = $(ReactDOM.findDOMNode(this.refs.CenterChangePassEdit))
    this.props.dispatch(
      UserCenterAction.loadUserCentersAsync()
    )
  }

  componentDidUpdate() {
    // console.log(this.props.data)
  }

  onChangeClick(){
    this.setState({
      activeData: {}
    })
    this.$changeModal.modal("show")
  }

  onCreateClick() {
    this.setState({
      activeData: {}
    })
    this.$modal.modal("show")
  }


  onDataCreate(data) {
    var param = {
      sys_user_id: this.props.data.id,
      unit_id: data.unit_id
    }
    this.props.dispatch(
      UserCenterAction.bindUserUnitAsync(param)
    )
    this.$modal.modal("hide");
  }

  onPassChange(data) {
    var param = {
      oldPassword: data.originPass,
      newPassword: data.newPass,
      username: this.props.sysUser.username
    }

    this.props.dispatch(
      UserCenterAction.changeUserPasswordAsync(param)
    )
    this.$changeModal.modal("hide");
  }

  onDeleteClick(unit_id) {
    this.props.dispatch(
      UserCenterAction.deleteUserUnitAsync({
        sys_user_id: this.props.data.id,
        unit_id: unit_id
      })
    )
  }

  render() {
    var self = this;
    return (
      <div className="content-body Center-content-body" >
        <CenterSettingTools
          onChangeClick={this.onChangeClick.bind(self)}/>
        <CenterSettingList
          sysUser = {this.props.sysUser}
          userType = {this.props.userType}
          data = {this.props.data}
          onDeleteClick = {this.onDeleteClick.bind(self)}
          />
        <CenterBindUnitEdit
          ref = "CenterSettingEdit"
          data = {this.state.activeData}
          onDataCreate = {this.onDataCreate.bind(self)}/>
        <CenterChangePassEdit
          ref = "CenterChangePassEdit"
          data = {this.state.activeData}
          onPassChange = {this.onPassChange.bind(self)}/>
      </div>
    )
  }
}

const mapStateToProps = (state, ownProps) => {
  return { data: state.userCenter.data }
}

export default connect(mapStateToProps)(CenterSettingBody);
